<template>
  <el-dialog title="题目预览" :visible="showDialog" @close="btnClose" width="50%">
    <el-row type="flex" justify="space-between">
      <el-col>
        【题型】:{{
          formData.questionType === "1"
          ? "单选题"
          : formData.questionType === "2"
            ? "多选题"
            : "简答题"
        }}
      </el-col>
      <el-col> 【编号】:{{ formData.id }} </el-col>
      <el-col>
        【难度】:
        {{
          formData.difficulty === "1"
          ? "简单"
          : formData.difficulty === "2"
            ? "一般"
            : "困难"
        }}
      </el-col>
      <el-col> 【标签】:{{ formData.tags }} </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" style="margin-top: 20px">
      <el-col> 【学科】: {{ formData.subjectName }} </el-col>
      <el-col> 【目录】:{{ formData.directoryName }} </el-col>
      <el-col> 【方向】:{{ formData.direction }} </el-col>
      <el-col> </el-col>
    </el-row><hr >
    【题干】：
    <div v-html="formData.question" />
    <!-- 单选 -->
    <div style="padding-left: 30px" v-if="formData.questionType === '1'">
      <p>单选题 选项:(以下的选中项为答案)</p>
      <div v-for="item in formData.options" :key="item.id">
        <el-radio :value="radio" :label="item.title" style="margin-top: 10px" />
      </div>
    </div>
    <!-- 多选 -->
    <div style="padding-left: 30px" v-if="formData.questionType === '2'">
      <p>多选题 选项:(以下的选中项为答案)</p>
      <div v-for="item in formData.options" :key="item.id" style="margin-top: 10px">
        <el-checkbox-group v-model="checkBox">
          <el-checkbox :label="item.title" style="margin-top: 10px" />
        </el-checkbox-group>
      </div>
    </div><hr />
    【参考答案】:
    <el-button type="danger" size="small" @click="playVideo" :disabled="!formData.videoURL">视频答案解析</el-button><br />
    <video style="width: 400px; height: 200px" v-if="showVideo" src=" http://v.itheima.com/zycbrm2.mp4" controls></video><hr />
    【答案解析】:
    <div style="display: inline-block" v-html="formData.answer"></div> <hr />
    【题目备注】:
    <div style="display: inline-block" v-html="formData.remarks"></div>
    <el-row slot="footer" type="flex" justify="end">
      <el-col>
        <el-button type="primary" @click="btnClose" :style="{float: 'right'}">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { detail } from '../../api/hmmm/questions'
export default {
  name: 'QuestionDialog',
  data () {
    return {
      showDialog: false,
      formData: {},
      radio: '', // 单选
      checkBox: [], // 多选
      showVideo: false, // 视频显示与隐藏
      options: {
        video: {
          url: ''
        },
        contextmenu: [
          {}
        ]
      }
    }
  },
  methods: {
    openDialogs (id) {
      detail({ id })
        .then((res) => {
          console.log(res.data)
          console.log(id)
          this.formData = res.data
          if (res.data.questionType === '3') return
          this.radio = res.data.options.find((item) => item.isRight === 1).title
          this.checkBox = res.data.options.filter((item) => item.isRight === 1).map((item) => item.title)
        })
        .catch((e) => {
          console.log(e)
        })
      this.showDialog = true
    },
    btnClose () {
      this.formData = {}
      this.checkBox = []
      this.radio = ''
      this.showVideo = false
      this.showDialog = false
    },
    playVideo () {
      if (!this.formData.videoURL) {
        return this.$message.warning('此题目没有视频解析')
      }
      this.options.video.url = this.formData.videoURL
      this.showVideo = true
    }
  }
}
</script>

<style scoped></style>
